<template>
  <div style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;" class="userManage">
    <el-tabs v-model="activeName" type="card"  @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in kuWeiList" :key="index" :label="item.gqName" :name="item.id"></el-tab-pane>
    </el-tabs>

    <el-button type="primary"  v-if="hasRole('kuwei:setting:add')" class="buttonAdd button_add_zl" @click="addKuWei">
    	<i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增
    </el-button>
    <wh-table :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option">
      <template slot-scope="props" slot="operate">
        <div >
        	<span class="caozuo_span">
          	<a v-if="hasRole('kuwei:setting:edit')"   @click="editKuWei(props.rowData)">编辑</a>
        	</span>
        	<span class="caozuo_span">
        		<a v-if="hasRole('kuwei:setting:delete')"  @click="deleteKuwei(props.num,props.row,props.rowData)">删除</a>
        	</span>
        </div>
      </template>
    </wh-table>
    <edit-ku-wei :dataDetail="dataDetail"  :type="operateType" :allKuWeiList="kuWeiList" ></edit-ku-wei>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import editKuWei from "./editKuWei";
  export default {
    name:'kuwei',
    components: {whTable,editKuWei},
    data(){
      return{
        tableData: [],
        tableHeader:[],
        tableLoading:true,
        dataDetail:{},
        operateType:"",
        option:{showOperate:false, headerCell: {background: 'rgb(214, 215, 216)', color: 'rgba(0, 0, 0, 0.8)'}},
        queryForm:{gqId:""},
        activeName: "",
        kuWeiList:[],
      }
    },
    mounted(){
      let self = this;
      self.$eventBus.$on("updateKuWei",function () {
        self.getKuWei();
      });
      self.getKuWei();
    },
    methods:{
      handleClick(tab, event){
        let choose = this.kuWeiList.find(item=>item.id == this.activeName);
        if(choose && choose.positionHousesList){
          this.tableData = this.groupTableByKuWeiId(choose.positionHousesList);
        }
      },

      groupTableByKuWeiId(positionHousesList){
        let positionArray = [];
        let map = {};
        for(let _position of positionHousesList){
          let gzId = _position.gzId;
          let khNum = _position.khNum;
          let exist = map[gzId+"-"+khNum];
          if(exist){
            exist.count = exist.count+1;
          }else{
            _position["count"] = 1;
            map[gzId+"-"+khNum] = _position
          }
        }
        for(let key in map){
          positionArray.push(map[key]);
        }

        return positionArray;
      },

      getKuWei(){
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/autoMonitor/position/queryAllPositionHouse",
          method: "post",
          params:self.queryForm,
        }).then(resp => {
          if (resp.success) {
            self.tableLoading = false;
            self.kuWeiList = resp.result;
            self.handleDefaultTab();
          }
        });
      },

      handleDefaultTab(){
        let self = this;
        self.tableHeader =  [{"columnName": "gzName", "coloumNameCn": "工装名称"},
          {"columnName": "code", "coloumNameCn": "库位代码"},
          {"columnName": "khNum", "coloumNameCn": "库号"},
          {"columnName": "count", "coloumNameCn": "库位数"}];
        if(self.kuWeiList && self.kuWeiList.length > 0){
          self.activeName = self.activeName&&self.activeName!=0?self.activeName:self.kuWeiList[0].id;
          self.tableData = this.groupTableByKuWeiId((this.kuWeiList.find(item=>item.id == this.activeName)).positionHousesList);
          self.option.showOperate = true;
        }else{
          self.tableData = [];
        }
      },

      editKuWei(rowData){
        let self = this;
        rowData.gqId = this.activeName;
        self.dataDetail = Object.assign({},rowData);
        self.operateType = 'edit';
        console.log(rowData)
      },

      addKuWei(){
        this.dataDetail = {
          id: "",
          gqId: this.activeName,
          gzId: "",
          khNum:""
        };
        this.operateType = 'add';
      },

      deleteKuwei(num,row,rowData){
        let self = this;
        let param = {gzId:rowData.gzId,khNum:rowData.khNum,status:'-1'};
        self.$confirm('确定删除该工装信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/position/deletePosition",
            method: "post",
            params: param,
          }).then(resp => {
            if (resp.success) {
              self.getKuWei();
              self.$notify({
                title: '提示',
                message: "删除成功！",
                type: 'info'
              });
              return
            }
            self.$notify({
              title: '提示',
              message: "操作失败，请联系管理员！",
              type: 'error'
            });
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      }
    }
  }
</script>
<style>
  .userManage .el-date-editor.el-input, .userManage .el-date-editor.el-input__inner {
    width: auto;
  }
  .userManage .buttonAdd{
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 13px;
  }
  .userManage .el-tabs__item:hover {
  	color: #1c488d
  }
  .userManage .el-tabs__item{
  	border: 0px !important;
    height: 26px !important;
    line-height: 26px !important;
    width: 120px;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .userManage .el-tabs__item.is-active {
    color: #34bfc6 !important;
    height: 33px !important;
    line-height: 33px !important;
    border: 1px solid #34bfc6 !important;
    border-bottom-color: #fff !important;   
    box-shadow: 0px -5px 6px -5px #000;
  }
  .userManage .el-tabs--card>.el-tabs__header .el-tabs__nav {
  	border: 0px;
    margin-top: 3px;
  }
  .userManage .el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
  	border-left: 1px;
  }
  .userManage .el-tabs--card>.el-tabs__header {
    border-bottom: 1px solid #34bfc6;
  }
</style>
